<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>03模板语法</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<p>---v-once----------------------------------------------------</p>
<div id="app1">

	<span>Message: {{ msg }}</span><br>
	<span v-once>这个Message(使用v-once)将不会改变: {{ msg }}</span>
	<button v-on:click="change">Change</button>
</div>
<p>---v-html----------------------------------------------------</p>
<div id="app2">
	<span>Using mustaches: {{ rawHtml }}</span><br>
	<span>Using v-html directive: <span v-html="rawHtml"></span></span>
</div>
<p>---v-bind 的用法----------------------------------------------------</p>
<div id="app3">
<-- Mustache{{}} 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：-->
	<button v-bind:disabled="isButtonDisabled">Button状态</button>
	<button v-on:click="SetShow(true)">设置不可用</button>
	<button v-on:click="SetShow(false)">设置可用</button>
</div>
<p> -----javaScript 表达式------------------------------------------</p>
<div id="app4">
	{{ number + 1 }}

	{{ ok ? 'YES' : 'NO' }}

	{{ message.split('').reverse().join('') }}

</div>

<div id="app5">
	<a v-bind:href="url">百度网址</a>
</div>

<script type="text/javascript">
	var app1=new Vue({
		el:'#app1',
		data:{
			msg:"Hello"
		},
		methods:{
			change:function(){
				this.msg="Hello world"
			}
		}
	})


	var app2=new Vue({
		el:'#app2',
		data:{
			rawHtml:"<span style='color:red'>This is show Red</span>"
		}
	})

	var app3=new Vue({
		el:"#app3",
		data:{
			isButtonDisabled:true
		},
		methods:{
			SetShow:function(value){
				this.isButtonDisabled=value
			}
		}
	})

	var app4 =new Vue ({
		el:"#app4",
		data:{
			number:1,
			ok:true,
			message:"abc"
		}
	})

	var app5 =new Vue({
		el:"#app5",
		data:{
			url:"http://www.baidu.com"
		}
	})
	</script>
<style type="text/css">
	p{
		color: red;
	}
</style>
</body>
</html>